<template>
  <!-- <DemoLange /> -->
  <!-- <CalcAttribute />
  <ClassStylessBind /> -->
  <!-- <StyleBind /> -->
  <!-- <WatchDemo /> -->
  <!-- <FormBind/> -->
  <!-- <RefDemo /> -->
  <!-- 第三步：显示组件 -->
  <!-- <MyComponent /> -->
  <!-- <my-component /> -->
  <!-- <div class="container">组件基础组成</div> -->
  <!-- <Header />
  <Main />
  <Aside /> -->
  <!-- 组件传递数据props; -->
  <!-- <Parent/> -->
  <!-- <ComponentA /> -->
  <!-- <ComponentEvent /> -->
  <!-- <Main /> -->
  <!-- <ComponentParent/> -->
  <!-- <AttrComponent class="attr-container"/> -->
  <!-- <SlotBase>
    <div>
      <h3>插槽标题</h3>
      <p>插槽内容</p>
    </div>
  </SlotBase> -->
  <!-- <SlotTow>
    <template #header>
      <h3>{{message}}</h3>
    </template>
    <template #main>
      <p>内容</p>
    </template>
  </SlotTow> -->
  <!-- <SlotAttr v-slot="slotProps"></SlotAttr> -->
  <!-- <SlotAttr>
    <template #header="slotProps">
      <h3>{{ currentTest }}-{{ slotProps.msg }}</h3>
    </template>
    <template #main="slotProps">
      <p>{{ slotProps.job }}</p>
    </template>
  </SlotAttr> -->
  <!-- <h3>组件的生命周期</h3>
  <p>{{message}}</p>
  <button @click="updateHandle">更新数据</button> -->
  <!-- <UseComponentLife/> -->
  <!-- <DynamicComponentA />
  <DynamicComponentB /> -->
  <keep-alive>
    <component :is="tabComponent"></component>
  </keep-alive>

  <button @click="changeHandle">切换组件</button>
</template>

<!-- <script setup>
import DemoLange from "./components/DemoLange.vue";
import CalcAttribute from "./components/CalcAttribute.vue";
import ClassStylessBind from "./components/ClassStylessBind.vue";
import StyleBind from "./components/StyleBind.vue";
import WatchDemo from "./components/WatchDemo.vue";
import FormBind from "./components/FormBind.vue"
import RefDemo from "./components/RefDemo.vue";
import MyComponent from "./components/MyComponent.vue"
</script> -->

<script>
//第一步：引入组件
// import MyComponent from './components/MyComponent.vue';

/*
组件之间的嵌套关系
*/
// import Header from "./pages/Header.vue"
// import Main from "./pages/Main.vue"
// import Aside from "./pages/Aside.vue"
//组件传递数据props; props传递数据，只能从父级传递到子级，不能反其道而行
// import Parent from "./components/Parent.vue"
// import ComponentA from "./components/ComponentA.vue"
/* *********组件之间传递数据的方案***********
1.父传子：props
2.子传父：自定义事件(this.$emit)
 */
//组件事件       
// import ComponentEvent from "./components/ComponentEvent.vue"
/* 组件事件配合v-model使用 
watch在其中起到关键性作用
*/
// import Main from "./components/Main.vue"
/* 组件数据传递
onEvent方法实现子传父
 */
import ComponentParent from "./components/ComponentParent.vue"
//透传Attributes
import AttrComponent from "./components/AttrComponent.vue"
//插槽Slots
import SlotBase from "./components/SlotBase.vue"
//Slots续集
/* 渲染作用域​
插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的 
具名插槽
*/
import SlotTow from "./components/SlotTow.vue"
//插槽再续集
import SlotAttr from "./components/SlotAttr.vue"

/* 
 *生命周期函数
 *  创建期：beforeCreate created
 *  挂载期：beforeMounte mounted
 *  更新期：beforeUpdate updated
 *  销毁期：beforeUnmount unmounted
 */

//组件生命周期应用
import UseComponentLife from "./components/UseComponentLife.vue"

//动态组件切换 component :is="tabComponent"
import DynamicComponentA from "./components/DynamicComponentA.vue"
import { defineAsyncComponent } from "vue"
// import DynamicComponentB from "./components/DynamicComponentB.vue"
//异步加载组件
const AsyncComponentB = defineAsyncComponent(() =>
  import("./components/DynamicComponentB.vue")
)
export default {
  data() {
    return {
      // message: "更新之前"
      tabComponent: "DynamicComponentA"
    }
  },
  // methods:{
  //   updateHandle(){
  //     this.message="更新之后"
  //   }
  // },
  // beforeCreate(){
  //   console.log("组件创建之前");
  // },
  // created(){
  //   console.log("组件创建之后");
  // },
  // beforeMount(){
  //   console.log("组件渲染之前");
  // },
  // mounted(){
  //   console.log("组件渲染之后");
  // },
  // beforeUpdate(){
  //   console.log("组件更新之前");
  // },
  // updated(){
  //   console.log("组件更新之后");
  // },
  // beforeUnmount(){
  //   console.log("组件销毁之前");
  // },
  // unmounted(){
  //   console.log("组件销毁之后");
  // },
  // data() {
  //   return {
  //     message: "插槽内容续集",
  //     currentTest: "测试内容"
  //   }
  // },
  //第二步：注入组件
  components: {
    // MyComponent:MyComponent
    // MyComponent
    // Header,
    // Main,
    // Aside
    // Parent
    //ComponentA
    //ComponentEvent
    // Main
    // ComponentParent
    // AttrComponent
    // SlotBase
    // SlotTow
    // SlotAttr
    // UseComponentLife
    DynamicComponentA,
    AsyncComponentB
  },
  methods: {
    changeHandle() {
      console.log(111)
      this.tabComponent = this.tabComponent == "DynamicComponentA" ? "AsyncComponentB" : "DynamicComponentA"
    }
  }
}
</script>
<style></style>

